<template>
  <view class="detailPage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">详情</view>
      </view>
    </shopro-navbar>
    <view class="card">
      <view class="introduce" v-html="detajs.content"></view>
      <image class="imgs" :src="detajs.cover" mode="widthFix"></image>
    </view>
    <!-- 课程 -->
    <view class="curriculum">
      <view
        class="curriculumList"
        v-for="(item, index) in dataList"
        :key="index">
        <!-- <image class="imgs" src="/static/images/finance/erji.png" mode="widthFix" v-if="item.type=='1'"></image>
				<image class="imgs" src="/static/images/finance/bofangs.png" mode="widthFix" v-if="item.type=='3'">
				</image> -->

        <image
          class="imgs"
          src="/static/images/finance/bofangs.png"
          mode="widthFix"></image>
        {{ item.title }}
      </view>
    </view>
    <view class="sure" @click="submit">
      <text class="money">￥{{ detajs.price }}</text>
      立即购买
    </view>
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",

      current: 0,
      collect: true,
      show: false,
      currId: 0,
      detajs: {},
      dataList: [],
      newID: "",
    };
  },
  props: {},
  onLoad(options) {
    this.newID = options;
    console.log(options);
    this.getDetail(options);
  },
  computed: {
    ...mapGetters(["isLogin", "authType"]),
  },
  created() {},
  onShow() {
    // this.getDetail();
  },

  methods: {
    getDetail(val) {
      this.$new_http("finance.classList", {
        id: val.id,
        cate_id: val.cate_id,
      }).then((res) => {
        this.detajs = res.data.course;
        this.dataList = res.data.list;
      });
    },
    change(index) {
      this.current = index;
    },
    handleDetail(val) {
      uni.navigateTo({
        url: "/pages/finance/detail?val=" + JSON.stringify(val),
      });
    },
    // 查看更多
    goMore(val) {
      uni.navigateTo({
        url: "/pages/finance/more?type=" + val,
      });
    },
    getStatus() {
      this.collect = !this.collect;
    },
    // 成为会员
    gocome(index) {
      this.currId = index;
    },
    submit() {
      console.log(this.detajs);
      let leaveMsg = {
        title: this.detajs.title,
        price: this.detajs.price,
        cover: this.detajs.cover,
        id: this.newID.id,
      };

      uni.navigateTo({
        url: "/pages/finance/confirm?val=" + JSON.stringify(leaveMsg),
      });
    },
  },
};
</script>

<style lang="scss">
.detailPage {
  background: #f7f7f7;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .card {
    width: 100%;
    // height: 390rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    margin-top: 2rpx;

    .imgs {
      width: 100%;
      margin-top: 46rpx;
    }

    .introduce {
      margin-top: 34rpx;
      font-family: PingFang;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 44rpx;
      text-align: justify;
    }
  }

  .curriculum {
    width: 100%;
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .curriculumList {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #666666;
      border-bottom: 2rpx #f0f0f0 solid;
      padding: 42rpx 36rpx;

      .imgs {
        width: 34rpx;
        margin-right: 15rpx;
      }
    }
  }

  .sure {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 92rpx;
    background: #ed861f;
    border-radius: 16rpx;

    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 92rpx;

    .money {
      font-size: 36rpx;
      margin-right: 20rpx;
      font-weight: 500;
    }
  }
}
</style>
